<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章修改</title>
    <#include "common/static.ftl"/>

    <link href="/editormd/css/editormd.min.css" rel="stylesheet" type="text/css"/>
    <script src="/editormd/js/editormd.js"></script>
    <script src="/editormd/js/editormd.amd.js"></script>


</head>
<body>

<div class="container">
    <#include "common/myself.ftl"/>
    <input type="hidden" value="${article.id}" id="articleId">
    <div class="row content-header">
        <div class="col-md-2">
            <img title="文章修改" src="/images/修改文章.png" style="height: 47px;margin-top: 25px;margin-left: 25px;">
        </div>
        <div class="col-md-10" style="text-align: right">
            <button type="button" class="btn btn-success" style="margin-top: 31px;" onclick="saveArticle()">保存文章</button>
            <a type="button" class="btn btn-info" style="margin-top: 31px;margin-right: 38px;" href="/route/index">返回列表</a>
        </div>
    </div>
    <hr>
    <div class="row clearfix" style="margin: 0 20px 0 20px;">
        <input class="form-control" placeholder="请输入文章标题" value="${article.title}" id="title"
               style="margin-bottom: 10px">
    </div>
    <div class="row clearfix" style="margin: 0 20px 0 20px;">
        <div id="markdown-editor">
            <!-- editormd start -->
            <div class="editormd form-control" style="margin: 0;" id="test-editormd">
                <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"
                          id="editormd">${article.text}</textarea>
                <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                <!-- html textarea 需要开启配置项 saveHTMLToTextarea == true -->
                <textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml"></textarea>
            </div>
            <!-- editormd end -->
        </div>
    </div>
</div>


<script>
    var testEditor;
    testEditor = $(function () {
        editormd("test-editormd", {
            width: "100%",
            height: 600,
            codeFold: true,
            syncScrolling: "single",
            //你的lib目录的路径
            path: "/editormd/lib/",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/uploadimg",
            emoji: false,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            saveHTMLToTextarea: true
        });
    });

    function saveArticle() {
        var id = $("#articleId").val();
        var title = $("#title").val();
        var text = $("#editormd").val();
        var content = $("#editorhtml").val();
        if (!title) {
            layer.msg("标题不可为空！", {icon: 2})
            return;
        }
        if (!content) {
            layer.msg("内容不可为空！", {icon: 2})
            return;
        }

        $.ajax({
            type: "PUT",
            contentType: "application/json;charset=UTF-8",
            dataType: 'json',
            url: "/article/update",
            data: JSON.stringify(
                {
                    id: id,
                    title: title,
                    text: text,
                    content: content
                }
            ),
            success: function (result) {
                if (result.code == 200) {
                    layer.msg(result.msg, {icon: 1});
                } else {
                    layer.msg(result.msg, {icon: 2})
                }
            },
            error: function (e) {
                layer.error(JSON.stringify(e))
            }
        });
    }
</script>
</body>
</html>